<template>
	<view>
		<view class="u-skeleton">
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
				<view class="money-con">
					<view class="left">
						<text class="u-skeleton-fillet">当前余额(元)</text>
						<text class="u-skeleton-fillet" style="margin-top: 5rpx;">{{ balance }}</text>
					</view>
					<view class="right" @click="recharge">
						<view class="recharge u-skeleton-fillet">充值</view>
					</view>
				</view>
				<view class="line"></view>
				<view style="color: #ccc;text-align: center;padding: 40rpx 0;" v-if="waterList.length==0">暂无流水</view>
				<view class="balance-detail">
					<view class="balance-item" v-for="(item, index) in waterList" :key="index">
						<view class="item-tit">
							<text class="u-skeleton-fillet" style="font-size: 28rpx;color: #181818;">{{ item.remark }}</text>
							<text class="u-skeleton-fillet">{{ item.create_time }}</text>
						</view>
						<view class="item-bal">
							<text class="col u-skeleton-fillet" v-show="item.balance > 0">{{ item.balance }}</text>
							<text class="col dec u-skeleton-fillet" v-show="item.balance <= 0">{{ item.balance }}</text>
							<text class="u-skeleton-fillet" style="font-size: 26rpx;color: #999;">余额：{{ item.current_balance }}元</text>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
		<u-skeleton :loading="loading" el-color="#eee" bg-color="#fff" :animation="true"></u-skeleton>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js"
	import { balanceWater } from '@/api/userApi.js'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				loading: true, // 是否显示骨架屏组件
				mescroll: null,
				balance: 0,
				form: {
					p: 1,
					length: 10
				},
				upOption: {
					use: true,
					auto: false,
					page: {
					  num: 1,
					  size: 10 // 每页数据的数量,默认10
					},
					empty: {
					  use: false
					},
					toTop: {
					  src: ''
					},
					onScroll: false,
					textNoMore: '',
				},
				downOption: {
					use: true,
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
					onScroll: false,
					bgColor: "linear-gradient(to right, #223977, #051a4c)", // 背景颜色 (建议在pages.json中再设置一下backgroundColorTop)
					page: {
					    num: 1,
					    size: 10 // 每页数据的数量,默认10
					}
				},
				waterList: [
					{
						"id": 1,
						"mid": 6,
						"balance": "-0.01",
						"current_balance": "0.00",
						"remark": "支付流水",
						"create_time": "2021-01-06 15:42:19"
					},
					{
						"id": 2,
						"mid": 5,
						"balance": "-0.01",
						"current_balance": "0.00",
						"remark": "支付流水",
						"create_time": "2021-01-06 15:42:19"
					},
					{
						"id": 3,
						"mid": 4,
						"balance": "-0.01",
						"current_balance": "0.00",
						"remark": "支付流水",
						"create_time": "2021-01-06 15:42:19"
					},
					{
						"id": 1,
						"mid": 6,
						"balance": "-0.01",
						"current_balance": "0.00",
						"remark": "支付流水",
						"create_time": "2021-01-06 15:42:19"
					},
					{
						"id": 2,
						"mid": 5,
						"balance": "-0.01",
						"current_balance": "0.00",
						"remark": "支付流水",
						"create_time": "2021-01-06 15:42:19"
					},
					{
						"id": 3,
						"mid": 4,
						"balance": "-0.01",
						"current_balance": "0.00",
						"remark": "支付流水",
						"create_time": "2021-01-06 15:42:19"
					},
					{
						"id": 1,
						"mid": 6,
						"balance": "-0.01",
						"current_balance": "0.00",
						"remark": "支付流水",
						"create_time": "2021-01-06 15:42:19"
					},
					{
						"id": 2,
						"mid": 5,
						"balance": "-0.01",
						"current_balance": "0.00",
						"remark": "支付流水",
						"create_time": "2021-01-06 15:42:19"
					},
					{
						"id": 3,
						"mid": 4,
						"balance": "-0.01",
						"current_balance": "0.00",
						"remark": "支付流水",
						"create_time": "2021-01-06 15:42:19"
					},
				],
				total: 0
			}
		},
		onLoad() {
			setTimeout(()=> {
				this.loading = false
			}, 1000)
			this._balanceWater()
		},
		methods: {
			async _balanceWater() {
				const res = await balanceWater(this.form)
				if (this.form.p === 1) {
					this.waterList = []
				}
				this.waterList = [...this.waterList, ...res.data.data.list]
				this.total = res.data.data.total
				this.balance = res.data.data.balance
				if (this.waterList.length === this.total) {
					this.mescroll.endSuccess(res.data.data.list, false)
				} else {
					this.mescroll.endSuccess(res.data.data.list, true)
				}
				console.log(res)
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll
			},
			downCallback(page) {
				this.form.p = 1
				this._balanceWater()
				console.log('下拉刷新')
				console.log(page)
				// console.log(this.downOption.page)
			},
			upCallback(page) {
				console.log('加载更多')
				this.form.p++
				this._balanceWater()
				// this.messageList = this.messageList.concat(data)
				// this.mescroll && this.mescroll.endSuccess(data.length)
			},
			recharge() {
				console.log(1)
				uni.navigateTo({url: '/pages/user/recharge'})
			}
		}
	}
</script>

<style lang="scss">
	.line {
		background-color: #f8f8f8;
		height: 20rpx;
	}
	.money-con {
		height: 240rpx;
		background-image: linear-gradient(to right, #223977, #051a4c);
		display: flex;
		align-items: center;
		padding: 0 30rpx 0 50rpx;
		.left {
			color: #fff;
			display: flex;
			flex-direction: column;
			margin-right: auto;
			text:nth-child(1) {
				font-size: 28rpx;
			}
			text:nth-child(2) {
				font-size: 74rpx;
			}
		}
		.right {
			.recharge {
				width: 180rpx;
				height: 90rpx;
				background-color: #fcd5b8;
				border-radius: 45rpx;
				color: #674830;
				font-size: 32rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				&:active {
					opacity: .9;
				}
			}
		}
	}
	.balance-detail {
		padding: 0 30rpx;
		.balance-item {
			height: 150rpx;
			border-bottom: 1rpx solid #ecedf5;
			display: flex;
			justify-content: center;
			align-items: center;
			.item-tit {
				margin-right: auto;
				display: flex;
				flex-direction: column;
				text:nth-child(1) {
					font-size: 32rpx;
					color: #181818;
					margin-bottom: 4rpx;
				}
				text:nth-child(2) {
					font-size: 26rpx;
					color: #999;
					padding-top: 6rpx;
				}
			}
			.item-bal {
				display: flex;
				flex-direction: column;
				text:nth-child(2) {
					font-size: 26rpx;
					color: #999;
					padding-top: 6rpx;
				}
				.col {
					font-size: 28rpx;
					color: #eb6657;
					text-align: right;
					margin-bottom: 4rpx;
				}
				.dec {
					color: #596579 !important;
					font-size: 28rpx !important;
				}
			}
		}
	}
</style>
